<template>
    <div>
        <el-dialog title="门店供应商" class="noselect" v-dialogdrag=" { target:'.el-dialog__header',container:'.el-dialog',border:'.el-dialog__wrapper'}" :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
            <div style="margin: 20px;"></div>
            <el-form :model="modelForm" ref="modelForm" label-width="100px" class="demo-ruleForm " >
                <el-form-item label=" " prop="no" :rules="[{ required: true, message: '编号不能为空', trigger: 'blur' }]">
               <el-input placeholder="请输入编号" v-model="modelForm.no" size="medium">
                     <template slot="prepend">
                         <el-tooltip placement="top" content="请填写编号">
                             <el-button tabIndex="-1">编号</el-button>
                         </el-tooltip>
                     </template>
                 </el-input>
                </el-form-item>
                <el-form-item label=" " prop="name" :rules="[{ required: true, message: '名称不能为空', trigger: 'blur' }]">
               <el-input placeholder="请输入名称" v-model="modelForm.name">
                     <template slot="prepend">
                         <el-tooltip placement="top" content="请填写名称">
                             <el-button tabIndex="-1">名称</el-button>
                         </el-tooltip>
                     </template>
                 </el-input>
                </el-form-item>


              <el-form-item label=" " prop="sellType" :rules="[{ required: true, message: '请选择结算方式', trigger: 'blur' }]">
                <div class="el-input el-input-group el-input-group--prepend">
                  <div class="el-input-group__prepend" tabindex="-1">结算方式</div>
                  <el-select v-model="modelForm.sellType" placeholder="请选择" class="w-100p">
                    <el-option
                      v-for="item in settlemements"
                      :key="item.key"
                      :label="item.text"
                      :value="item.key">
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>

                <el-form-item label=" " prop="linker" :rules="[]">
               <el-input placeholder="请输入联系人" v-model="modelForm.linker">
                     <template slot="prepend">
                         <el-tooltip placement="top" content="请填写联系人">
                             <el-button tabIndex="-1">联系人</el-button>
                         </el-tooltip>
                     </template>
                 </el-input>
                </el-form-item>
                <el-form-item label=" " prop="phone" :rules="[]">
               <el-input placeholder="请输入联系电话" v-model="modelForm.phone">
                     <template slot="prepend">
                         <el-tooltip placement="top" content="请填写联系电话">
                             <el-button tabIndex="-1">联系电话</el-button>
                         </el-tooltip>
                     </template>
                 </el-input>
                </el-form-item>
                <el-form-item label=" " prop="address" :rules="[]">
               <el-input placeholder="请输入联系地址" v-model="modelForm.address">
                     <template slot="prepend">
                         <el-tooltip placement="top" content="请填写联系地址">
                             <el-button tabIndex="-1">联系地址</el-button>
                         </el-tooltip>
                     </template>
                 </el-input>
                </el-form-item>
              <el-form-item  prop="bankName" :rules="[]">
                <el-input type="text" v-model="modelForm.bankName" auto-complete="off" placeholder="请输入开户行" :maxlength="32">
                  <template slot="prepend">
                    <el-tooltip placement="top" content="请输入开户行">
                      <el-button tabIndex="-1">开户行</el-button>
                    </el-tooltip>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item  prop="bankNo" :rules="[]">
                <el-input type="text" v-model="modelForm.bankNo" auto-complete="off" placeholder="请输入银行账号" :maxlength="32">
                  <template slot="prepend">
                    <el-tooltip placement="top" content="请输入银行账号">
                      <el-button tabIndex="-1">银行账号</el-button>
                    </el-tooltip>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item  prop="creditNo" :rules="[]">
                <el-input type="text" v-model="modelForm.creditNo" auto-complete="off" placeholder="请输入信用代码" :maxlength="32">
                  <template slot="prepend">
                    <el-tooltip placement="top" content="请输入信用代码">
                      <el-button tabIndex="-1">信用代码</el-button>
                    </el-tooltip>
                  </template>
                </el-input>
              </el-form-item>

              <el-form-item label=" " prop="remark" :rules="[]">
                <el-input placeholder="请输入备注" v-model="modelForm.remark">
                  <template slot="prepend">
                    <el-tooltip placement="top" content="请填写备注">
                      <el-button tabIndex="-1">备注</el-button>
                    </el-tooltip>
                  </template>
                </el-input>
              </el-form-item>


            </el-form>
                        <div class="foot-bar-button">
                            <el-button type="primary" @click="submitForm('modelForm')">提交</el-button>
                            <el-button @click="resetForm('modelForm')">取消</el-button>
                        </div>
        </el-dialog>
    </div>
</template>
<script>
    //注意路径
    export default{
        props: ['isShow','id'],  //参数
        data(){
            return {
                modelForm: {
                },
                 showDialog:false,
                 activityId:"",
                 isSave:true,
              settlemements:[],
              states:[]
            };
        },
        watch:{
            isShow:function(newValue,oldValue){
                this.showDialog=newValue;
                if(newValue){
                    if(this.id!=''){
                        this.activityId=this.id;
                        this.isSave=false;

                        this.$axios.get("/branchstores/branchSuppliers/"+this.activityId+"/update").then(data=>{
                            this.modelForm=data.content.branchSupplier;
                            this.settlemements=data.content.settlementTypes;
                            this.states=data.content.states;

                       });
                    }else{
                        this.isSave=true;
                        this.$axios.get("/branchstores/branchSuppliers/create").then(data=>{
                       this.modelForm=data.content.branchSupplier;
                       console.log(this.modelForm)
                          this.settlemements=data.content.settlementTypes;
                          this.states=data.content.states;
                        });
                    }
                }
            }
        },
        created(){
            window.this = this;
        },
        methods: {
            greet(){

            },
            goBack() {
                this.router.go(-1);
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(this.isSave){
                            this.$axios.post("/branchstores/branchSuppliers/create",this.modelForm).then(data=>{
                                    if(data.status==200){
                                    this.$message({
                                        message:data.message,
                                        type: 'success'
                                    });
                                    this.$emit('addSuccess');
                                }else{
                                    this.$message.error(data.message);
                                }

                            })

                        }else{
                            this.modelForm._method="PUT";
                            this.$axios.put("/branchstores/branchSuppliers/"+this.activityId+"/update",this.modelForm).then(data=>{
                                if(data.status==200){
                                    this.$message({
                                        message:data.message,
                                        type: 'success'
                                    });
                                    this.$emit('addSuccess');
                                }else{
                                    this.$message.error(data.message);
                                }
                            })
                        }
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$emit('close');
                this.showDialog=false;
            },
            handleClose(done){
                this.$emit('close');
                done();
            },
            isNum(item,key){
                var r = /^\+?[1-9][0-9]*$/;
                if( ! r.test(item[key])){
                    item[key]="0.00"
                }else{
                    item[key]=item[key]
                }
            },
            isDouble(item,key){
                var isNum=/^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
                if( ! isNum.test(item[key])){
                    item[key]="0.00"
                }else{
                    item[key]=item[key]
                }
            }
        }
    }
</script>
<style scoped>
  .el-input-group--append .el-input__inner, .el-input-group__prepend{
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
</style>
